<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>文章列表</title>
        <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
        <link rel="stylesheet" href="./css/list.css" />
    </head>
    <body>
        <div class="layui-card">
            <div class="layui-card-header">文章列表</div>
            <div class="layui-card-body">
              <!-- 内容区一 表单搜索区 start -->
              <form class="layui-form" action="" id="search">
                <div class="layui-form-item">
            
                  <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 200px;">
                      <select id="category" lay-verify="">
                        <option value="">所有分类</option>

                      </select>
                    </div>
            
                    <div class="layui-input-inline" style="width: 200px;">
                      <select id="state" lay-verify="">
                        <option value="">所有状态</option>
                        <option value="已发布">已发布</option>
                        <option value="草稿">草稿</option>
                      </select>
                    </div>
                  </div>
            
                  <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 100px;">
                      <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
                    </div>
                  </div>
            
                </div>
              </form>
              <!-- 内容区一 表单搜索区 end -->
            
              <!-- 内容区二 表格区 start -->
              <table class="layui-table">
                <colgroup>
                  <col width="40%">
                  <col width="15%">
                  <col width="15%">
                  <col width="15%">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th>文章标题</th>
                    <th>分类</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>

                </tbody>
              </table>
              <!-- 内容区二 表格区 end -->
            
              <!-- 内容区三 分页区 start -->
              <div id="page"></div>
              <!-- 内容区三 分页区 end -->
            </div>
            </div>


        <!-- 文章列表的模板 start -->
        <script type="text/html" id="tpl-article">
            {{each data item}}
            <tr>
              <td>{{item.title}}</td>
              <td>{{item.cate_name}}</td>
              <td>{{item.pub_date | dateFormat}}</td>
              <td>{{item.state}}</td>
              <td>
                <a href="./edit.html?id={{item.id}}" class="layui-btn layui-btn-xs">编辑</a>
                <button data-id="{{item.id}}" type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
              </td>
            </tr>
            {{/each}}
          </script>
          <!-- 文章列表的模板 end -->
        <!-- 下拉的模板 开始 -->
          <script type="text/html" id="tpl-category">
            <option value="">所有分类</option>
            {{each data item}}
            <option value="{{item.id}}">{{item.name}}</option>
            {{/each}}
          </script>
        <!-- 下拉的模板 结束 -->



        <script src="../assets/lib/jquery.js"></script>
        <script src="../assets/lib/template-web.js"></script>
        <!-- 必须加载layui.all.js，因为页面中用到了很多layui提供的功能，比如弹层 -->
        <script src="../assets/lib/layui/layui.all.js"></script>
        <script src="../assets/js/common.js"></script>
        <!-- 加载自己的js文件 -->
        <script src="./js/list.js"></script>
    </body>
    </body>
</html>
